DIST.25 「管理画面から考えるUX」
https://gyazo.com/f0a879da371c56a1d4f270a5d0feeec1
管理画面の作り手と管理画面を使っている人の視点から語ってほしい
その親切心が仇になる。使いやすい管理画面をつくるためのペルソナ設定 開発部 Webグロースチーム所属
プロダクトデザイナー kassy
今日の結論
管理画面など繰り返し使われるサイトは
使い方をある程度マスターした中級者むけにしましょう
初級者と上級者は別途ケアしよう
なぜ中級者？
中級者の割合が1番多い
初級→中級は簡単に移行できる
中級→上級はハードルが「高い」
はじめて使う勤怠ツールでも何回かつかえばわかる
相対的に中級者の層が多くなる
上級者が中級者側になることもある
中級者向けにする
初級者・上級者向けにすると失敗する
例
登録フォーム
入力順序はどうあるべきか？が問題になった
初心者目線で考えた場合
入力するグループを分けたほうがいい
中級者目線で考えた場合
似ている動作は連続したほうが効率的
文字入力とアップロードはわかえる
アップロード用フォームの注釈がいるかいらないか
はてなを押すとツールチップで案内する
中級者にとって必要化どうか
一旦隠した
中級者以外はどうするか？
それぞれ別の動線でサポート
初心者
任意で表示させないことも可能なモーダル・ツールチップ
上級者
詳細オプションという形で別途機能を提供
管理画面の画面設計方法について
いっぱい来ないほうが理想
管理画面
購入者側の管理画面
いっぱい来るほうが理想的
サービストップ画面
定期購入画面
管理画面は「煩わしさ」をなくすことに重きをおくと良さそう！
わかりやすさ
画面設計
作業フロー
1. 競合調査
2. UI Flowsの作成
ユーザーの見るもの・することに商店をおいた遷移図法
ユーザーの見るもの
競合調査で見えてきた使われている要素
ユーザーのすること
メリット
行動に基づいた遷移が考えられる
画面遷移図よりも手軽に使用できる
デメリット
粒度の設定がむずかしい
画面レイアウトは別途考える必要がある
クラス図の相互関係から見るマークアップ・レイアウトを研究中
3. 画面デザイン
効率性
デザイナー、CS、Co-founder
長野と東京を行き来
BtoB向けのSaaS
利用頻度が高い
メイン業務で使うようなものは利用時間が長い
複数人で触る
担当者が変わることもある
求められること
長時間、長期間使っていても苦にならない
住みやすい家を作っていくことを意識した
見た目が派手よりも毎日の使い勝手を考慮
提供するサービスを使い込む
ほかのサービスが気になってきた
横幅100%の改修
メモが1行で70字以上
max-widthで設定
1行あたり30~40字がよみやすい
人が入れ替わっても使いやすい
どんな設定なのが視覚的に表現されている
誰のためのデザイン？を嫁
Webサイトの訪問者の行動を顧客ごとにリアルタイム解析
アクションを提供
ポップアップ
KARTE TALK
2018年夏〜11月リニューアル
これまでの開発体制
エンジニアが開発・設計に専念
ビジネスメンバーが顧客に説明
最初は3人で回す設計
徐々に利用する会社も増えてきた
規模が大きいものだと既存の設計・CS体制でやるのは厳しい
無理がでてきたので設計見直し（リニューアル）を図る
リニューアルに向けた新たな開発体制
ヒアリングをする
仮説やデザインのモック自体をクライアントにあててみる
より課題を深掘りして開発に活かす
チャット機能ではチームでのアサインができるものを加えた
変わったこと
自分たちの思う課題 ≠ 現場の課題
ユースケースを理解する問題解決につながる開発になった
実務にあった仮説がブラッシュアップされた
クライアントと一緒につくることで手戻りがなくなった
自分がつくった機能をクライアントが使っている光景をみて感動した
ロールに関係なくクライアントに向かい合う
プロダクトを使い続けてもらえることでより開発に向き合えることに気づけた
激しい変化の中で個別最適されたエンジニア向け管理画面
武田 博
まとめ
あるECサイトの管理画面を限りなくなくした
やりたいこと > 管理画面
という状況にする
「画面」とは？
むかしは画面はなかった
効果
普段の生活に近い感覚で操作ができる
画面だったらエンジニアじゃなくてもできる
効率と効果のトレードオフ
使うのは簡単だけど機能は成約的
なんでもできるが使うのが難しい
「管理」とは？
サービスのいち機能と捉える
管理画面とは？
ONE TEAMでやるもの
「サービスそのもの」
効果を最大化するために黒い画面を使いましょう
１人でやらないので安心してください
商品少量数なECだからできた
損益分岐点が訪れてた方できた
管理画面とは穴ではなくドリルであってほしい
管理画面立ち上げ屋の仕事術
なにをしているのか
フルスクラッチで管理画面のフロントエンド受託開発
仕様を考える
バックエンドもやる
チームがおおきくなったら去る
直近プロダクト
どうやっているのか
ビジネスを理解する
ユーザーに会いに行く
肉盛りしてから削り出す
フロントエンドのおすすめ構成
ビジネス・システム・ラプソディー 〜業務システム狂詩曲〜
業務内容
コンテンツマーケティング
ライター特化型コンテンツ
業務システムの改善について
BtoB案件管理
クライアント、運用チーム、フリーランス
業務最適化されれていないシステム
同じ手作業の繰り返し
目視チェックが頼みの綱
毎回数回くる締切
疲れてくると視野が狭まる
思考停止状態に
改善の機会はあったが
開発は1, 2ヶ月かかる
明日改善されないの？
たとえ：風邪で寝込む人に予防の話ししても無駄
本当に必要なのかを詰められる
そんな暇はない
繁忙期で仕事量が３倍に
改善ループを回すために
1. 作業の自動化
メールでくる案件をコピペ
フォームを自動入力
ブラウザ拡張で作成！
目指した完成度
2/3でOK
2. 運用とズレているUIの整理
優先度に合わせて整理
よく使う項目を最前に
使ってない・見てないものは非表示・削除
「ふつう」に近づける
当たり前につくるのは難しい
ささいな改善も地理も積もれば山となる
業務システムでは顕著
一つ学んだら片っ端から直せばいい、遅くはない
まずは余裕をもつ
ミッションクリティカルなシステム
業務は止めない
でも改善は攻める
システムの外から攻める
UI改善
自動化
データ検索やグルーピング
システムを直接触らない
バリデーションもそのまま使える
おかしなデータを防げる
セーフティがあれば攻められる
システムのチェックを活かす
目視確認はここでは正義
他運用のメンバーに逐一FBを依頼
攻めのプロトタイピング
本番環境でテストしてしまう
半日くらいで実装
良くなったが
運用コストは 1/3圧縮
運用の改善では限界がある
ツールが大量になると大変になる
運用だけではだめだとわかる
開発ともう一度向き合う
開発から改善提案も実は多かった
時間がかからずに効果があがりそうなものをやっていく
要望の出し方を変えた
「Aという問題を解決したいので、Bという方法がある」という
毎日の作業依頼を変えた
なぜ？をちゃんと添える
自分ごとにしてもらうためにやっていく
開発も本気にしていった
勝手に改善してくれた
運用からみた開発主体の業務改善
繁忙期を迎えた
スケジュールを把握しきれない
初手で王手を取りに行く動き
状況把握して対応する業務があるのでアラート出す
自動化できると発言
エンジニアに「なぜやるか」をインプットすると価値が最大化になる
目指すゴール
何したって人はつかれる
管理画面から要素が消える、タスクが勝手に終わるのが一番
具体例
UI業務最適化
タスク自動化
無駄な業務の再考
役割を理解しよう
運用
本質を見よう
開発と話そう
慣れて諦めない
開発
業務を知ろう
運用をまず暇にしろ
運用と一緒にやろう
チームの力を信じよう！
運用に終着点なし、改善点はずっと潰していこう
長期的なプロダクトビジョンを実現しよう
「みんなのデザイン」のために 〜 EC-CUBE 4 の管理画面をデザインするにあたって考えたこと 〜 2006年公開
オープンソース・ソフトウェア
EC-CUBEのユーザーとは誰？
誰のためにデザインするのか？
どうデザインを進めたか、何を頑張ったか
ユーザーとは誰のことか？
カスタマー
ショップオーナー・スタッフ
デザイナー・エンジニア
コントリビューター（貢献者）
管理画面をふれる人の体験をどうデザインするか？
事業部（株式会社ロックオン）
エンジニア
デザイナー
プロダクトオーナー
EC-CUBEユーザー
フロント開発社
管理画面デザイナー（深沢さん）
ユーザーとは直接関わってない
管理画面は様々な人が行き来する交差点のような場所
人々はどこから来てどこへゆくのだろうか？
オーナーのリテラシは様々
スタッフにも教育コストがかかる
すべてのユーザーストーリーは考えられない
自分の体験を振り返る
2.11系のカスタマイズに取り組んだ
ノウハウが少ない
パートナー企業に力を借りた
管理画面もいい思い出がない
検索ボタンをおさないとデータ一覧がみれない
マスターという用語がデータ管理者向けでどうもなじまない
ラベルの意味するところがよくわからない
自分自身も悩めるユーザーだった
EC-CUBEをよくわからないマスター・デザイナーの代表としてふるまうことに
どうデザインを進めたか
とにかく見せて「まわす」
１〜２週ごとのデザインレビューを行う
当日までにとりあえずのものを作る
未完成だということを前提にみんなでレビュー
問題は即修正で数回転
MTGが終わったら8割修正して完了
パーツはがっつり多層シンボル化
テーブル修正もすぐできる
言葉のデザインをがんばる
熟練度の低いユーザへの拝領
ラベルの洗い出しとツールチップのライティング
よくみる用語をより平易に
商品マスター => 商品一覧
受注マスター => 受注一覧
ショップマスター => 基本設定
コントリビューターに貢献する
デザインガイド（PDF）
配布用デザインデータ
OSSを支えるのは貢献者たち
エコシステムの活性化 = UX向上
配慮すべきユーザーのバランス
すべてのユーザー像は追わない
デザインレビューでの大切な存在
既存ユーザーの声を代弁してくれる人
１人の主観によらないデザインに着地
すぐれたファシリテーター大切
プロダクトオーナーのバランス感を信頼
まとめ
最初の取っ掛かりは自分
他人の感覚に力を借りる
言葉・デザインガイドという現場でできることはある